<!-- jinja -->
<!-- no-sidebar -->
<!-- no-header -->
<!-- no-breadcrumbs -->
<!-- title: ERPNext Translator -->
{% extends "frappe_theme/templates/base.html" %}
{% block title %}ERPNext Translation Portal{% endblock %}


{% block head %}
	{{ super() }}
	<meta name="google" content="notranslate">
{% endblock %}

{% block head_include %}
	<meta name="description" content="ERPNext translation portal allows users around the world to contribute translations for ERPNext and other Frappe apps" />
	<meta name="keywords" content="ERP Translation, ERPNext Translation, Frappe Translation, Frappe i18n" />
	<style>
		table {
			margin: auto;
			border: 1px solid #d1d8dd;
		}
		td{
			min-width: 200px;
			height:50px;
		}
		th{
			color:white;
			background-color: #36414c
		}
		hero-button {
			width: 170px;
		}
		.footer-message {
			display: none;
		}
	</style>
{% endblock %}

{% block content %}
<section class="top-section section">
	<div class='container'>
		<h1 class='text-center'>Contribute Translations</h1>
		<p class='lead'>Help translate ERPNext and other Frappe apps.</p>
		<div class="mt-2">
			<a class="btn btn-secondary btn-md hero-button" target="_blank" href="/login#signup">Become a Verifier</a>
			<a class="btn btn-primary btn-md hero-button" target="_blank" href="https://frappe.io/docs/user/en/guides/basics/contribute_translations">How to Contribute</a>
		</div>
		<a
			class="mt-2 small text-muted"
			target="_blank"
			href="https://github.com/frappe/translator/issues/new?title=New+Language+-+YOUR+LANGUAGE+NAME">
			Request a new language
		</a>
		<div class="mt-5">
			<div class="row px-5 mx-auto">
				<div class="col-md-6 col-sm-12 mb-3">
					<select class="form-control language-select">
						<option disabled hidden selected>Select language</option>
						{% for lang in languages %}
						<option value="{{ lang.language_code }}" {% if lang.language_code == frappe.form_dict.language %}selected{% endif %}>
							{{ lang.language_name }} ({{lang.language_code}})
						</option>
						{% endfor %}
					</select>
				</div>

				<div class="col-md-6 col-sm-12">
					<select class="form-control status-select">
						<option disabled hidden selected>Select status</option>
						{% for status in status_options %}
							<option value="{{ status }}" {% if status == frappe.form_dict.status %}selected{% endif %}>{{ status }}</option>
						{% endfor %}
					</select>
				</div>
			</div>
			<a class="text-muted small" href="/">Clear Filters</a>
		</div>
		<table class="bg-white table mt-5 {{ 'table-hover' if contributed_translations }} text-left">
				<thead>
					<tr>
						<th scope="col">Language</th>
						<th scope="col">Original Text</th>
						<th scope="col">Translated Text</th>
						<th scope="col">Status</th>
					</tr>
				</thead>

				<tbody>
					{% if contributed_translations %}
						{% for translation in contributed_translations %}
						<tr>
							<td>{{ language_labels[translation.language] }}</td>
							<td>{{ translation.source_string }}</td>
							<td>{{ translation.translated_string }}</td>
							<td>
								<span class="indicator {{ "green" if translation.status=="PR sent" else "orange"
									if translation.status=="Verified" else "red" }}"></span>
								{{ translation.status }}
							</td>
						</tr>
						{% endfor %}
					{% else %}
					<tr>
						<td colspan="5" class="text-center text-muted p-5">No contributions to show</td>
					</tr>
					{% endif %}
				</tbody>

			</table>
			<p class="mt-0 text-muted">Showing last 100 contributions</p>
	</div>
</section>
{% endblock %}

{% block script %}
<script type="text/javascript">
	function setFilter() {
		let lang = $('.language-select').val();
		let status = $('.status-select').val();
		let query_params = new URLSearchParams();
		if (lang) query_params.append('language', lang);
		if (status) query_params.append('status', status);
		document.location.replace(`?${query_params.toString()}`);
	}
	$('.language-select, .status-select').on('change', setFilter);
</script>
{% endblock %}
